﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>BitTorrent-UI Chanllenge</title>
<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('body').unbind('load').bind('load', getJSONPFeed());
        var feedEntries;
        function getJSONPFeed() {
            $.ajax({
                url: 'http://pipes.yahoo.com/pipes/pipe.run?_id=f42c711ab0e64056fd200b38ad98e102&_render=json&_callback=myfunction',
                jsonpCallback: 'myfunction',
                dataType: "jsonp",
                type: "GET",
                cache: true,
                success: myfunction
            });
        }
        function myfunction(response) {
            console.log(response);
            var items = response.value.items[0];
            $("#feedTitleImage").attr("src", items.logo);
            $("#mainHeading").html(items.title.content);
            var entries = items.entry;
            feedEntries = entries;
            for (var i = 0; i < entries.length; i++) {
                var entryFeed = processEntry(entries[i], i);
                $("#feedContent").append(entryFeed);
            }
        }

        function processEntry(entry, i) {
            var entrydiv = $('<div/>').addClass('entry');
            var h3 = $('<h3/>');
            //var anchor = $('<a/>').attr('href', entry.link[0].href).html(entry.title).attr('target', '_blank');
            var anchor = $('<a/>').addClass('viewDetails').attr('data-feed', 'feed' + i).html(entry.title);
            h3.append(anchor);
            entrydiv.append(h3);
            var divContent = $('<div/>').addClass('feedEntryContent').html(entry.content.content);
            entrydiv.append(divContent);
            var enclosures = $('<div/>').addClass('enclosures').html('Media Files');
            var enclosure = $('<div/>').addClass('enclosure');
            var img = $('<img/>').addClass('type-icon').attr('href', 'moz-icon://.txt?size=16');
            enclosure.append(img);
            var index = entry.link[1].href.lastIndexOf('/') + 1;
            var medialink = $('<a/>').attr('href', entry.link[1].href).html(entry.link[1].href.substring(index, entry.link[1].href.length));
            enclosure.append(medialink);
            enclosures.append(enclosure);
            entrydiv.append(enclosures);
            return entrydiv;
        }

        $('body').on('click', 'a.viewDetails', function (event) {
            event.preventDefault();
            var feed = $(this).attr('data-feed');
            var index = feed.substr(4, 1);
            var metaData = feedEntries[index];
            var author = metaData.author.name;
            var content = metaData.content.content;
            var publish = metaData.published;
            var rights = metaData.rights;
            var title = metaData.title;
            var links = metaData.link[0].href + "\n" + metaData.link[1].href + "\n" + metaData.link[2].href;
            alert("Author: " + author + '\n' + 'Content: ' + content + '\n' + 'Published Date: ' + publish + '\n'
            + 'Rights: ' + rights + '\n' + 'Title: ' + title + '\n' + 'Links: ' + links);
        });
    });
</script>
<style type="text/css">
.type-icon {
    height: 16px;
    vertical-align: bottom;
    width: 16px;
}
.enclosure {
    margin-left: 2px;
    vertical-align: middle;
}
#feedTitleLink {
    -moz-margin-end: 0;
    -moz-margin-start: 0.6em;
    float: right;
    margin-bottom: 0;
    margin-top: 0;
}
.enclosures {
    background: none repeat scroll 0 0 -moz-dialog;
    border: 1px solid threedshadow;
    margin: 1em auto;
    padding: 1em;
}
.bold{font-weight:bold;font-size:14px;}
.viewDetails{cursor:pointer;text-decoration:underline;color:Blue}
</style>
</head>
<body>
<div id="feedBody">
<div id="feedTitle">
<a id="feedTitleLink">
    <img id="feedTitleImage" alt="Vodo All Works" src=""/>
</a>
<h3 id="mainHeading"></h3>
</div>
<div id="feedContent">

</div>
</div>
</body>
</html>
